import * as React from 'react';
import {renderItems, VJsonComponent, VJsonComponentBase} from "../factory";
import {toJS} from "mobx";
import _ from "lodash";

export interface LayerVJsonProp {
    addonAfter?: string | React.ReactNode
    addonBefore?: string | React.ReactNode
    defaultValue?: string
    disabled?: boolean
    maxLength?: number
    prefix?: string | React.ReactNode
    size?: 'large' | 'middle' | 'small'
    suffix?: string | React.ReactNode
    type?: string
    allowClear?: boolean
    bordered?: boolean
    className?:string
}

export interface LayerState {

}

@VJsonComponent({
    view: 'layer'
})
export default class Layer extends VJsonComponentBase<LayerVJsonProp, LayerState> {
    static defaultProps = {
    }

    constructor(props: any) {
        super(props);
        _.defaults(
            this.props.vjson,
            Layer.defaultProps
        )
        props.$context.scopeInstance['$closeDialog'] = this.close.bind(this)
    }
    close() {
        const layerList=$('div[layer_content_id='+this.props.vjson.layerId+']');
        const colseBtn=layerList.find('.layui-layer-close');
        if(layerList.length>0 && layerList.attr('role') == 'layer'){
            colseBtn.click();
            setTimeout(() => {
                layerList.remove();
            }, 200);
        }
    }
    render() {
        // @ts-ignore
        return (
            <div id={this.props.vjson.layerId} className="layer-wrap-body">
                {
                    ...renderItems(this, this.props.vjson.items)
                }
                {
                    (!this.props.vjson.footer) ? null : <div className="layer-wrap-footer">{renderItems(this, this.props.vjson.footer)}</div>
                }
            </div>
        )
    }
}
